<!--
 * @description 行组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-row"
		:class="_classes"
		:style="_styles"
	>
		<view class="pure-row__content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { computed } from "vue";
	import props from "./props";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits([""]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];
		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 间隔
		// 如果是字符串
		if (typeof _props.gap === "string") {
			// 尝试转换成数组
			const gapArr = _props.gap?.split?.(" ");
			if (gapArr.length === 0) gapArr.push(["0px", "0px"]);
			if (gapArr.length === 1) gapArr.push(gapArr[0]);
			array.push(`--pure-row-row-gap: ${gapArr[0]};`);
			array.push(`--pure-row-column-gap: ${gapArr[1]};`);
		}

		// 如果是数组
		else if (Array.isArray(_props.gap)) {
			const gapArr = _props.gap;
			if (gapArr.length === 0) gapArr.push(["0px", "0px"]);
			if (gapArr.length === 1) gapArr.push(gapArr[0]);
			array.push(`--pure-row-row-gap: ${gapArr[0]};`);
			array.push(`--pure-row-column-gap: ${gapArr[1]};`);
		}

		return array;
	});
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
